
<template>
  
    <div class="sidebar">
      <br />
      <ul>
        <li
          class="sidebar-item"
          v-for="(item, index) in menuItems"
          :key="index"
        >
          <router-link :to="item.path" class="sidebar-link">{{
            item.name
          }}</router-link>
        </li>
      </ul>
    </div>

    <div>
      <br />
      <button @click="goHeader()" style="float: right" class="btn btn-secondary">返回前台</button>
      <button @click="logout()" style="float: right" class="btn btn-secondary">退出登录</button>
      <br />
    </div>

    <hr />
  
</template>

<script>
import { http } from "../utils/http.js";
export default {
  data() {
    return {
      menuItems: [
        { name: " 首页", path: "/BackFront" },
        { name: " 预约管理", path: "/appt" },
        { name: " 用户管理", path: "/user" },
        { name: " 公告管理", path: "/backBulletin" },
        { name: " 球桌管理", path: "/BallAbo" },
      ],
    };
  },
  methods: {
    //退出//
    logout() {
      sessionStorage.removeItem("token");
      http.post("/logout").then((res) => {
        if (res.status === 200) {
          this.$router.push("/login");
        }
      });
    },
    goHeader() {
      this.$router.push("/home");
    },
  },
};
</script > 

<style scoped>
.back {
  
  background-size: cover; /* 确保背景图片覆盖整个容器 */ 
}

.sidebar {
  width: 200px; /* 侧边栏宽度 */
  height: 100vh; /* 侧边栏高度，占据视口高度 */
  background-color: #4d6c4c; /* 背景色 */
  color: #fff; /* 文字颜色 */
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  overflow-y: auto; /* 允许垂直滚动 */
}

.sidebar-item {
  list-style: none; /* 移除列表项标记 */
  padding: 10px; /* 内边距 */
  border-bottom: 1px solid #480000; /* 下边框 */
}

.sidebar-link {
  text-decoration: none; /* 移除下划线 */
  color: inherit; /* 继承父元素颜色 */
  display: block; /* 使其占据整行 */
  padding: 5px; /* 链接内边距 */
  transition: color 0.3s; /* 过渡效果，当链接被点击时颜色变化更自然 */
}

.sidebar-link:hover,
.sidebar-link.router-link-active {
  /* 当链接被点击或处于激活状态时 */
  color: rgb(199, 212, 216); /* 更改颜色 */
  background-color: #440909; /* 更改背景色 */
}
.full-screen-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

background-color: rgb(225, 156, 64);
  background-repeat: no-repeat;
  background-size: cover;
}
hr {
  width: 100%; /* 设定hr的宽度为浏览器宽度的70% */

  border: none; /* 移除默认的边框 */
  height: 1px; /* 设定hr的高度 */
  background-color: #000; /* 设定hr的颜色 */
 
}
</style>



